<template>
  <!-- 页面-角色管理-分配应用-分配应用组件 -->
  <div class="allotApp-publicStyle role-allots">
    <!-- style="height:330px" -->
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="allotAppSearchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 搜索编码和名称 -->
        <Form-item prop="nameOrCode">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.nameOrCode"
            :placeholder="$t('module.role.warning.enterAppCodeOrAppName')"
            
            @on-enter="search"
          ></Input>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <!-- 表格 -->
    <InnerPageTable ref="appTable" :config="tableConfig" @onSelectionChange="selectAllotApply">
      <!-- <div slot="table-bar">
        <RPButton optType="create" @click="add" />
        <RPButton optType="delete" @click="deleted()" />
      </div>-->
    </InnerPageTable>
  </div>
</template>
<script>
// import { getAppListByTenantCode } from "@/api/applicationApi.js";
import { queryAssignedApp } from "@/api/roleApi.js";
import { roleAppColumns } from "./columns.js";
// import { roleSelectColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      required: true
    }
    // tenantCode: {
    //   type: String,
    //   required: true
    // }
  },
  data() {
    return {
      selectDefaultApp: [],
      appLication: [],
      // 搜索
      searchForm: {
        roleId: this.roleId,
        nameOrCode: ""
      },
      // 保存初始数据
      initData: {
        appLication: []
      },
      // 标识当前是否是搜索查询
      isSearch: ""
    };
  },
  computed: {
    tableConfig() {
      return {
        resource: this.appLication,
        columnsFn: roleAppColumns.bind(this),
        autoFirst: true,
        isPage: false,
        onSelectionChange: this.selectAllotApply,
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  created: function () {
    // 获取表格列表数据
    this.search("init");
    
  },
  mounted() {
    this.getSelectDefaultApp()
  },
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //appEnabled:1-有效，0-无效
      if (row.appEnabled == 0) {
        return "tableDisableStyle";
      }
    },
    // 获取表格列表数据
    search(sign) {
      queryAssignedApp(this.searchForm)
        .then(response => {
          this.appLication = [];
          // 将数据的selected替换为_checked，使表格根据_checked判断是否选中节点
          let data = response.data;
          let obj = {};
          data.map(item => {
            obj = item;
            obj["_checked"] = item["selected"];
            if(obj["_checked"]) {
              this.selectDefaultApp.push(obj.fromAppId)
            }
            delete obj["selected"];
            this.appLication.push(obj);
          });
          // 保存初始数据
          this.initData.appLication = sign == "init" ? this.appLication : this.initData.appLication;
          // 标识当前是否是搜索查询
          this.isSearch = this.searchForm.nameOrCode ? "search" : "";
        })
        .catch(data => {});
    },
    reset() {
      this.$refs["allotAppSearchForm"].resetFields();
      this.search();
    },
    // 默认选中
    getSelectDefaultApp() {
      this.$emit("getSelectDefaultApp", this.selectDefaultApp);
    },
    // 选中某一项时触发
    selectAllotApply(selection) {
      this.$emit(
        "handleAllotApp",
        selection.map(items => {
          return items.fromAppId;
        }),
        this.appLication,
        this.initData.appLication,
        this.isSearch
      );
    }
  }
};
</script>
<style lang="less">
  .role-allots{
    .inner-table{
      min-height: unset;
    }
  }
</style>
